<template>
  <div class="tabbar">
  <router-link v-for="item in links" :key="item.path" :to="item.path" tag="span" class="tabbaritem">
          <Badge v-if="item.name === 'cart'" type="error">{{totalCount}}</Badge>
      <span class="icon" v-html="item.iconf"></span>
      <span class="title">{{item.text}}</span>
      </router-link>
  </div>
</template>
<script>
import routes from '@/router/routes'
import { Badge } from 'mint-ui'
import 'mint-ui/lib/style.css'
import {
  mapGetters
} from 'vuex'
export default {
  name: 'tabbar',
  data () {
    return {links: routes.filter(r => r.isNav === true)}
  },
  computed: {
    ...mapGetters(['totalCount'])
  },
  components: {
    Badge
  }
}

</script>

<style lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 931790 */
  src: url('//at.alicdn.com/t/font_931790_jdif68o8yzp.eot');
  src: url('//at.alicdn.com/t/font_931790_jdif68o8yzp.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931790_jdif68o8yzp.woff') format('woff'),
  url('//at.alicdn.com/t/font_931790_jdif68o8yzp.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931790_jdif68o8yzp.svg#iconfont') format('svg');
}
.tabbar{
    width: 100%;
    display: flex;
    background:#F5F5F5;
    .tabbaritem {
        position: relative;
        flex: 1;
        text-align: center;
        .icon{
            display: block;
            height: 28px;
            // text-align: center;
            // vertical-align: middle;
            font-family: iconfont;
            padding-top: 1px;
            font-size: 20px;
        }
        .title{
            height: 15px;
            display: block;
            line-height: 15px;
            font-size: 14px;
        }
        &.router-link-exact-active,
        &.router-link-active{
            color: #E91E63;

}

    // height: 20px;
    // width: 20px;
    .mint-badge {
    position: absolute;
    display: block;
    top: -10px;
    left: 55px;
    font-size: 10px;
  }
}
}

</style>
